<template>
    <section class="modlude">
        <div>
            <div class="title_name">设备信息</div>
            <el-button type="text" size="small" @click="xiugaiorxq(2)"><i class="el-icon-edit"></i>编辑</el-button>
            <el-descriptions class="margin-top" title="" :column="3" :labelStyle="{'width': '200px'}" size="" border>

                <el-descriptions-item>
                    <template slot="label">
                        产品名称
                    </template>
                    {{deviceData.productName}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    所属子系统
                </template>
                {{deviceData.subsystemName}}
                <!-- 智能工业 -->
            </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        设备类型
                    </template>
                    {{deviceData.deviceType}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        所属项目
                    </template>
                    {{xqName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        连接协议
                    </template>
                    {{deviceData.transportProtocol}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        消息协议
                    </template>
                    {{deviceData.messageProtocol}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        IP地址
                    </template>
                    \
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        创建时间
                    </template>
                    {{$root.getDateArray(deviceData.createTime)[9]}}
                    <!-- {{deviceData.description}} -->
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        注册时间
                    </template>
                    {{$root.getDateArray(deviceData.createTime)[9]}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        最后上线时间
                    </template>
                    \
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        说明
                    </template>
                    {{deviceData.description}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        设备厂家
                    </template>
                    {{deviceData.vender}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        设备型号
                    </template>
                    {{deviceData.model}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        供应商联系人
                    </template>
                    {{deviceData.supplierName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        供应商联系方式
                    </template>
                    {{deviceData.supplierPhone}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        安装日期
                    </template>
                    {{deviceData.installationDate}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        安装位置
                    </template>
                    {{deviceData.namehouse}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        开始使用时间
                    </template>
                    {{deviceData.startTime}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        报废日期
                    </template>
                    {{deviceData.scrapTime}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        设备负责人
                    </template>
                    {{deviceData.principal}}
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div>
            <div class="title_name">配置</div>
            <el-button type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
            <div class="config_name">MQTT 认证配置</div>
            <el-descriptions class="margin-top" title="" :column="2" size="" :labelStyle="{'width': '200px'}" border>

                <el-descriptions-item>
                    <template slot="label">
                        用户
                    </template>
                    kooriookami
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        密码
                    </template>
                    智能工业
                </el-descriptions-item>

            </el-descriptions>
        </div>
        <el-dialog :title="addorupdata==1?'新增':addorupdata==2?'修改':'详情'" width="30%" :visible.sync="addFormVisible"
            @closed='closeadd' :close-on-click-modal="false">
            <el-form :model="addForm" label-width="135px" ref="addform" :disabled="disabled">
                <el-form-item label="所属项目" size="small" prop="projectId"
                    :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                    <el-select v-model="addForm.projectId" placeholder="请选择所属项目" @change="projectIdchange">
                        <el-option v-for="item in xqTree" :label="item.name" :value="item.id" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域名称" size="small" prop="sectionId"
                    :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                    <el-cascader ref="cascader" v-model="addForm.sectionId" :options="sectionTree"
                        :props="defaultProps2" :show-all-levels="false" checkStrictly @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <!-- <el-form-item label="设备ID"  size="small" prop="id"
                    :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                    <el-input :disabled="addorupdata==2?true:false" v-model="addForm.id"></el-input>
                </el-form-item> -->
                <el-form-item label="设备名称" size="small" prop="name"
                    :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="所属产品" prop="productId"
                    :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                    <el-select v-model="addForm.productId" clearable placeholder="请选择所属产品">
                        <el-option v-for="item in productlist" :label="item.name" :value="item.id" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属系统" prop="subsystemCode"
                :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                    <el-select v-model="addForm.subsystemCode" clearable placeholder="请选择所属系统">
                        <el-option v-for="item in subsystemList" :label="item.systemType" :value="item.keyId" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备唯一标识" size="small" prop="sn">
                    <el-input  v-model="addForm.sn"></el-input>
                </el-form-item>
                <el-form-item label="模板" prop="profileIds">
                    <el-select v-model="addForm.profileIds" multiple placeholder="请选择">
                        <el-option
                          v-for="item in profilelist"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                </el-form-item>
                <!-- <el-form-item label="所属机构">
            <el-select v-model="addForm.projectId" placeholder="请选择所属机构">
                <el-option label="中山大学" value="1"></el-option>
            </el-select>
        </el-form-item> -->
                <el-form-item label="说明" size="small">
                    <el-input type="textarea" autosize v-model="addForm.description"></el-input>
                </el-form-item>
                <el-form-item label="图标：" prop="">
                    <el-upload ref="addupload" :auto-upload="false" class="avatar-uploader" :show-file-list="false"
                        :action="uploadPath" list-type="picture" :on-change="onChange"
                        :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="closeadd">取消</el-button>
                <el-button v-if="addorupdata!=3" type="primary" @click.native="addlist">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import { labelSelect,dictionaryProfile,sectionList,sectionTree,systemList,xqSelectList, iotdevicebyid, iotdeviceupdate, listSelect } from "../../url/api"
    export default {
        data() {
            return {
                labelList:[],
                uploadPath: '/api/v1.0/file/upload/file',
                defaultProps2: {
                    children: 'children',
                    label: 'name',
                    value: 'id',
                    emitPath: false,
                    expandTrigger: 'hover', checkStrictly: true
                },
                profilelist:[],
                sectionTree: [],
                activeName: 'cpxx',
                deviceData: {},
                producturl: '',
                srcList: [],
                xqTree: [],
                addorupdata: 1,
                addForm: {},
                productlist: [],
                disabled: false,
                addFormVisible: false,
                xqName:'',
                addsectionList:[],
                subsystemList:[],
                imgfileList: [],
                imageUrl: "",
            };
        },
        methods: {
            handleAvatarSuccess(resp, file, fileList) {
                debugger
                if (resp.ok) {
                    this.imgfileList = fileList
                    // console.log(resp.data[0], "QQQQQQQQQQ");
                    this.addForm.photoUrl = resp.data[0];
                    this.imageUrl = resp.data[0];
                    this.gotoadd()
                }

            },
            gotoadd() {
                if (this.addorupdata == 1) {
                    // iotdeviceadd(this.addForm).then((res) => {
                    //     console.log("新增", res)
                    //     if (res.data.ok) {
                    //         this.$message({
                    //             message: '添加成功',
                    //             type: 'success'
                    //         });
                    //         this.getlist()
                    //     } else {
                    //         this.$message('添加失败')
                    //     }
                    //     this.closeadd()
                    // })
                } else if (this.addorupdata == 2) {

                //    this.addForm.id = this.rowid
                                // debugger
                    iotdeviceupdate(this.addForm).then((res) => {
                        if (res.data.ok) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.$emit('updata', JSON.parse(JSON.stringify(this.addForm)));

                            this.getlist(this.addForm)
                        } else {
                            this.$message('修改失败')
                        }
                        this.closeadd()
                    })
                }
            },
            onChange(file, fileList) {
                console.log(file, fileList, "aaaaaaaaaaa");
                this.imgfileList = fileList;
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            getsubsystemList(){
                this.subsystemList = [];
                // debugger
                systemList({}).then(res => {
                    
                    console.log(res);
                    this.subsystemList = res.data.data
                })
            },
            getaddSectionList(id) {
                this.sectionTree = [];
                sectionTree([id]).then(res => {
                    console.log(res);
                    this.sectionTree = res.data.data;
                    console.log(this.sectionTree, "AAAAAAAAAAAAAAAAAAA");
                })
            },
            handleChange(value) {
                // this.addForm.sectionId = this.option1[this.option1.length - 1];
                console.log("区域ID", this.addForm.sectionId);
            },
            projectIdchange(projectId) {
                console.log("AAAAAAA", projectId);
                // debugger
                this.goproductlist(projectId);
                this.getaddSectionList(projectId);
            },
            addlist() {
                // console.log("this.addF", this.addForm)
                this.$refs.addform.validate((valid) => {
                    // console.log("valid", valid)
                    if (valid) {
                        // this.addForm.deviceId = this.deviceData.id;
                        // this.addForm.deviceType = 'product';
                        // delete this.addForm.projectId
                        this.$confirm("确定执行此操作吗？", '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            // this.adddialog = false
                            // console.log(this.addForm)
                            console.log(this.imgfileList.length, this.imageUrl, this.addForm.photoUrl);
                            if (this.imgfileList.length == 0 && this.imageUrl == this.addForm.photoUrl) {
                                this.gotoadd();
                            } else {
                                // this.addForm.picture = ''
                                // this.pictrueNum = 0
                                this.$refs.addupload.submit();
                            }
                            // if (this.addorupdata == 1) {
                            //     // iotdeviceadd(this.addForm).then((res) => {
                            //     //     console.log("新增", res)
                            //     //     if (res.data.ok) {
                            //     //         this.$message({
                            //     //             message: '添加成功',
                            //     //             type: 'success'
                            //     //         });
                            //     //         this.getlist()
                            //     //     } else {
                            //     //         this.$message('添加失败')
                            //     //     }
                            //     //     this.closeadd()
                            //     // })
                            // } else if (this.addorupdata == 2) {
                            //     // this.addForm.id = this.rowid
                            //     // debugger
                            //     iotdeviceupdate(this.addForm).then((res) => {
                            //         if (res.data.ok) {
                            //             this.$message({
                            //                 message: '修改成功',
                            //                 type: 'success'
                            //             });
                            //             this.$emit('updata', JSON.parse(JSON.stringify(this.addForm)));

                            //             this.getlist(this.addForm)
                            //         } else {
                            //             this.$message('修改失败')
                            //         }
                            //         this.closeadd()
                            //     })
                            // }
                            this.adddialog = false

                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            closeadd() {
                this.addForm = {
                    // deviceId: this.deviceData.id,
                    // deviceType: 'product',
                    // name: '',
                    // pointRef: '',
                    // readOnly: 1,
                    // sn: '',
                    // unit: '',
                    // valueType: ''
                },
                this.imgfileList = []
                this.imageUrl = ''
                    this.$refs.addform.resetFields();
                this.addorupdata = 1
                this.addFormVisible = false;
                this.disabled = false
            },
            xiugaiorxq(index) {
                this.getsubsystemList();
                let row = this.deviceData
                // debugger
                this.addorupdata = index
                if (index == 3) {
                    this.disabled = true
                }
                // this.rowid = row.id
                this.goproductlist(row.projectId);
                this.addForm = {
                    id: row.id,
                    name: row.name,
                    productId: row.productId,
                    projectId: row.projectId,
                    description: row.description,
                    sectionId:row.sectionId,
                    subsystemCode:row.subsystemCode,
                    profileIds:row.profileIds,
                    sn:row.sn,
                    photoUrl: row.photoUrl,
                    labelIds:row.labelIds
                },
                this.imageUrl = row.photoUrl
                this.getaddSectionList(row.projectId);

                    this.addFormVisible = true;
            },
            goproductlist(projectId) {
                let params = {
                    projectId: projectId  //
                }
                params = JSON.parse(JSON.stringify(params));
                listSelect(params).then(res => {
                    console.log(res);
                    this.productlist = res.data.data
                    console.log(this.productlist);
                })
            },
            handleClick(tab, event) {
                // console.log(tab, event);
            },
            getlist(data) {
                let params = {
                    id: data.id
                }
                iotdevicebyid(params).then((res) => {
                    //console.log(res)
                    if (res.data.ok == true) {
                        this.deviceData = res.data.data;
                    } else {
                        this.$message(res.data.message);
                    }
                    console.log(this.deviceData);
                })
            },
            getdata() {
                let row = JSON.parse(sessionStorage.getItem('deviceData'));
                // debugger
                console.log(row);
                let params = {
                    id: row.id
                }
                iotdevicebyid(params).then((res) => {
                    //console.log(res)
                    if (res.data.ok == true) {
                        this.deviceData = res.data.data;
                    } else {
                        this.$message(res.data.message);
                    }
                    console.log(this.deviceData);
                })
                // this.producturl = this.deviceData.photoUrl;
                // this.srcList.push(this.deviceData.photoUrl);
                console.log(this.deviceData);
                this.getXqdata();
                this.getdictionaryProfile();
                labelSelect({}).then((res) => {
                    console.log(res);
                    if (res.data.ok) {
                        this.labelList = res.data.data;
                    }
                });
            },
            getXqdata(){
                xqSelectList({}).then((res) => {
                //项目选择列表
                console.log(res);
                if (res.data.ok) {
                    this.xqTree = res.data.data;
                    // this.formSearch.projectId = this.xqTree[0].id;
                    // this.getlist();
                    console.log(this.xqTree);
                    // debugger
                    this.xqTree.forEach(ret => {
                        if(ret.id == this.deviceData.projectId){
                            this.xqName = ret.name
                        }
                    });
                }
            });
            },
            getdictionaryProfile(){
                dictionaryProfile().then(res => {
                    console.log(res);
                    this.profilelist = res.data.data;
                    console.log(this.profilelist);
                })
            }

        },
        mounted() {
            this.getdata();
            
        },
    }
</script>
<style scoped>
    .title_name {
        display: inline-block;
        font-size: 17px;
        margin: 10px 20px 20px 5px;
    }

    .config_name {
        margin: 0px 0px 5px 5px;
        font-size: 12px;
    }
</style>